<template>
  <div class="photoinfo-container">
    <h3 class="title">{{ photoinfo.title }}</h3>

    <p class="info">
      <span>发表时间：{{ photoinfo.add_time | dataFormat }}</span>
      <!-- <span style="color: orange">点击：{{ photoinfo.click }}次</span> -->
    </p>

    <hr />

    <!-- 缩略图区域 -->
    <div class="thumbs">
      <!-- 使用 v-for 循环渲染缩略图 -->
      <!-- <img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" @click="$preview.open(index, photolist)" :key="index"> -->
      <vue-preview :slides="photolist"></vue-preview>
    </div>

    <!-- 内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>

    <!-- 评论子组件 -->
    <!-- 注意：在使用评论子组件的时候，人家必须要接收一个 newsid 的属性 -->
    <comment
      :work_id="id"
      :type="type"
      :work_title="photoinfo.title"
      ref="commentRef"
      v-show="!isHideComment"
    ></comment>

    <nav class="mui-bar mui-bar-tab">
      <div class="my-tab-item" @click="toComment">
        <!-- 页面定位到评论 -->
        <span class="mui-tab-label">
          <img src="../../assets/img/comment.png" alt="" width="25px" />
        </span>
      </div>
      <!-- 喜欢 -->
      <div class="my-tab-item" @click="changeLike">
        <span class="mui-tab-label">
          <img
            src="../../assets/img/liked.png"
            alt=""
            width="25px"
            v-if="isLiked"
          />
          <img src="../../assets/img/like.png" alt="" width="25px" v-else />
        </span>
      </div>
      <!-- 屏蔽评论 -->
      <div class="my-tab-item" @click="isHideComment = !isHideComment">
        <span class="mui-tab-label">
          <img
            src="../../assets/img/hideComment.png"
            alt=""
            width="25px"
            v-if="isHideComment"
          />
          <img
            src="../../assets/img/showComment.png"
            alt=""
            width="25px"
            v-else
          />
        </span>
      </div>
    </nav>
  </div>
</template>

<script>
// 导入评论子组件
import comment from "../sub-components/Comment.vue";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      username:'',
      photoinfo: {}, // 图片信息
      photolist: [], // 缩略图的数组
      type: 2,
      likeId: "",
      isLiked: false,
      isCollected: false,
      isHideComment: false,
    };
  },
  created() {
    if (localStorage.getItem("UserInfo")) {
      this.username = window.JSON.parse(
        localStorage.getItem("UserInfo")
      ).username;
    }
  },
  activated() {
    this.isLiked = false;
    this.getPhotoInfo();
    this.getMyLike();
  },
  methods: {
    // async getPhotoInfo() {
    //   // 当调用一个异步的方法，同时，这个异步方法的返回值是 Promise 对象的时候，才可以使用 await 和 async
    //   const { data } = await this.$http.get("/api/getimageInfo/" + this.id);
    //   if (data.status === 0) return (this.photoinfo = data.message[0]);
    // },
    getPhotoInfo() {
      this.$http
        .get("/getImageInfo", {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            let data = res.data.message[0];
            this.photoinfo = data;
            let arr = [];
            data.src.split(",").forEach((item) => {
              arr.push({
                w: 600,
                h: 400,
                msrc:
                  "http://localhost:9528/admin/news_info/downloadPic?img_url=" +
                  item,
              });
            });
            this.photolist = arr;
          }
        });
    },
    // 首先先得到该用户对当前业务的喜欢的情况
    getMyLike() {
      this.$http
        .get("/getMyLikeByWorkId", {
          params: {
            username: this.username,
            work_id: this.id,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            const data = res.data.message;
            if (data.length > 0) {
              this.likeId = data[0].id;
              this.isLiked = true;
            }
          } else {
            this.isLiked = false;
          }
        });
    },
    changeLike() {
      this.isLiked = !this.isLiked;
      if (this.isLiked) this.addMyLike();
      else {
        this.cancelMyLike();
      }
    },
    // 添加喜欢
    addMyLike() {
      let params = {
        type: this.type,
        username: this.username,
        work_id: this.id,
        title: this.photoinfo.title,
        content: this.photoinfo.content,
        img: this.photoinfo.img_url,
      };
      this.$http.post("/addMyLike", params).then((res) => {
        if (res.data.errcode === 200) {
          Toast("成功添加至我的喜欢!!!");
        } else {
          Toast("操作失败!!!");
        }
      });
    },
    // 取消喜欢
    cancelMyLike() {
      let params = {
        id: this.likeId,
      };
      this.$http.post("/delMyLike", params).then((res) => {
        if (res.data.errcode === 200) {
          this.isLiked = false;
          Toast("已取消!!!");
        } else {
          Toast("操作失败!!!");
        }
      });
    },
    // 跳到评论
    toComment() {
      this.$refs.commentRef.focusComment();
    },
  },
  props: ["id"],
  components: {
    comment,
  },
};
</script>

<style lang="scss" scoped>
.photoinfo-container {
  padding: 3px;
  .mui-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  // 解决tabbar 区域 和 图片分类列表JS行为冲突的问题。（实际上就是当photolist可以实现滑块滑动后，但是又不能点击底部的菜单，切换界面的问题）
  // 原因：是因为mui里面的'mui-tab-item'与PhotoList.vue里面使用的mui产生冲突
  // 解决：在页面中把所有和'mui-tab-item'相关的样式找出来，复制粘贴到项目中，然后修改类名为'my-tab-item'，然后引用的时候也更改即可。
  .mui-bar-tab .my-tab-item.mui-active {
    color: #e25b45;
  }
  .mui-bar-tab .my-tab-item {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
  }
  .mui-bar-tab .my-tab-item .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mui-bar-tab .my-tab-item .mui-icon ~ .mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.title {
  line-height: 20px;
  font-size: 15px;
  text-align: center;
  margin: 15px 0;
}
.info {
  font-size: 13px;
  color: #e25b45;
  display: flex;
  justify-content: space-between;
}
.content {
  font-size: 13px;
  line-height: 30px;
}
</style>